fix: Gutenberg CSS bleed into Bricks editor + dark mode toggle + misc by jackgranatowski · Pull Request #176 · codeslash-dev/SLASHED

jackgranatowski · 2026-05-31T20:58:46Z

$(cat <<'EOF'

Summary

Bricks editor CSS bleed: Slashed_Gutenberg_Enqueue::enqueue_frontend_styles() lacked a bricks_is_builder_main() guard. In the unified plugin both integrations register wp_enqueue_scripts handlers — the Core and Bricks enqueues correctly skipped loading on the builder page, but the Gutenberg enqueue did not, causing SLASHED's universal reset (margin: 0, padding: 0, svg { display: block }, etc.) to apply to the Bricks builder chrome and deform its icons.
Bricks dark mode toggle inert: Bricks only activates its dark-mode toggle element when at least one Color Manager entry has a dark_mode field. SLASHED color entries previously had only hex + raw. Added dark_mode: { hex, raw } with the same var() reference — SLASHED's CSS custom properties already switch values when data-brx-theme="dark" is set, so Bricks just needed to see the field to unlock the toggle.
Dist path depth off by one: ../../../dist/ from integrations/bricks/ and integrations/gutenberg/ only goes 3 levels up to plugins/ — needed ../../../../dist/ to reach the repo-root dist/ directory. Local file fallback was always falling through to CDN.
CSS bundle descriptions wrong: Essential was described as "reset + design tokens only" — it's actually the full core/ layer (tokens, reset, layout, states, motion, etc.). Optimal adds color palette, forms, and legacy support. Full adds components and utilities. Fixed in both the WP settings page and the Bricks admin SPA.
Regression test path stale: tests/element-types.test.js imported from ../integrations/bricks/ (old pre-restructure path); updated to ../plugins/SLASHED-for-WP/integrations/bricks/.
gen-class-hints.js log messages stale: Hardcoded data/classes-hints.json replaced with path.relative(ROOT, OUT) so messages always reflect the actual output location.

Test plan

Open the Bricks editor — SLASHED icons in the builder panel should no longer be deformed/bold
Add a Bricks dark-mode toggle element to a page — it should now activate and switch themes
Verify the local-file CSS fallback works in repo checkout (dist path fix)
Check the CSS bundle radio buttons on the SLASHED settings page show correct descriptions
CI regression tests pass (element-types.test.js import fixed)

https://claude.ai/code/session_01DU3r3kT7GqH7w7jeadV2DT
EOF
)

Generated by Claude Code

Summary by CodeRabbit

Bug Fixes
- CSS resets no longer injected into the Bricks builder interface.
Improvements
- Updated CSS bundle tier descriptions to clearly show what content is included in each option (essential, optimal, full).
- Added dark mode metadata support for color palettes in Bricks integration.

Essential includes all core/ modules (tokens, reset, layout, states, motion, etc.) — not just reset + tokens. Optimal adds color palette, forms, and legacy support. Full adds components and utilities on top. Updated both the WP settings page (class-admin.php) and the Bricks admin SPA (BundleTab.svelte) + rebuilt assets. https://claude.ai/code/session_01DU3r3kT7GqH7w7jeadV2DT

…anel When both integrations are active (unified plugin), the Gutenberg enqueue hook had no bricks_is_builder_main() guard, so it loaded the SLASHED CSS framework on the Bricks editor page even though the Core and Bricks enqueue classes correctly skipped it. The universal resets (margin/padding, svg display:block, button font:inherit, etc.) then bled into the Bricks builder chrome, causing deformed icons in the panel UI. https://claude.ai/code/session_01DU3r3kT7GqH7w7jeadV2DT

…toggle Bricks only activates its dark-mode toggle element when at least one color in the Color Manager has a dark_mode variant. SLASHED color entries previously only had hex + raw fields, so the toggle was permanently inert. Adding dark_mode: { hex, raw } with the same var() reference as light mode is sufficient — SLASHED's CSS custom properties already switch to their dark values when data-brx-theme="dark" is set on <html> (bridged by the inline rule in class-enqueue.php). Bricks just needed to see the dark_mode field present to unlock the toggle. https://claude.ai/code/session_01DU3r3kT7GqH7w7jeadV2DT

coderabbitai · 2026-05-31T20:58:56Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: c7d653a4-a542-49bd-9ba4-31d89b7fec84

📥 Commits

Reviewing files that changed from the base of the PR and between a305dfa and 50dcfeb.

📒 Files selected for processing (5)

plugins/SLASHED-for-WP/includes/class-admin.php
plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/components/BundleTab.svelte
plugins/SLASHED-for-WP/integrations/bricks/assets/admin-app/app.js
plugins/SLASHED-for-WP/integrations/bricks/includes/class-colors.php
plugins/SLASHED-for-WP/integrations/gutenberg/includes/class-enqueue.php

📝 Walkthrough

Walkthrough

The PR synchronizes CSS bundle option descriptions across three admin UI layers, adds Bricks dark-mode palette metadata, and prevents style enqueuing in Bricks builder context. The bundle labels now provide more specific descriptions of included layers and components.

Changes

CSS Bundle UI and Bricks Integration Updates

Layer / File(s)	Summary
CSS Bundle Label Synchronization `plugins/SLASHED-for-WP/includes/class-admin.php`, `plugins/SLASHED-for-WP/integrations/bricks/admin-app/src/components/BundleTab.svelte`, `plugins/SLASHED-for-WP/integrations/bricks/assets/admin-app/app.js`	The displayed descriptions for `essential`, `optimal`, and `full` CSS bundle options are updated to new, more detailed text in the WordPress admin radio buttons, Bricks Svelte component select options, and compiled asset bundle info select, consistently reflecting the bundle tier contents.
Bricks Dark Mode Palette Metadata `plugins/SLASHED-for-WP/integrations/bricks/includes/class-colors.php`	The `vars_to_palette_colors()` method now includes a `dark_mode` sub-structure with `hex` and `raw` values in each palette color entry to enable Bricks dark-mode UI support.
Bricks Builder CSS Enqueue Guard `plugins/SLASHED-for-WP/integrations/gutenberg/includes/class-enqueue.php`	An early-return guard in `enqueue_frontend_styles()` detects Bricks builder main context via `bricks_is_builder_main()` and skips CSS enqueuing to prevent style injection into Bricks' builder interface.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

codeslash-dev/SLASHED#134: Updates to the CSS bundle option label text in the Bricks admin UI (BundleTab and App.js selector) overlap directly with this PR's description synchronization work.
codeslash-dev/SLASHED#97: Both PRs modify integrations/bricks/includes/class-colors.php palette color objects; #97 adds hex fallbacks while this PR adds dark_mode metadata to the same palette entries.
codeslash-dev/SLASHED#84: Both PRs address CSS bleed into Bricks builder by adding enqueue guards that check bricks_is_builder_main() to prevent style injection.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 7.14% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly addresses the primary fixes in the changeset: Gutenberg CSS bleed into Bricks editor, dark mode toggle support, and miscellaneous updates. It accurately summarizes the main changes.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch claude/gutenberg-integration-scope-jSOZX

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

claude added 3 commits May 31, 2026 20:44

jackgranatowski merged commit fc349ba into main May 31, 2026
9 checks passed

Navigation Menu

Uh oh!

fix: Gutenberg CSS bleed into Bricks editor + dark mode toggle + misc - #176

fix: Gutenberg CSS bleed into Bricks editor + dark mode toggle + misc#176
jackgranatowski merged 3 commits into
mainfrom
claude/gutenberg-integration-scope-jSOZX

jackgranatowski commented May 31, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 31, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

❌ Failed checks (1 warning)

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

jackgranatowski commented May 31, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented May 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

❌ Failed checks (1 warning)

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jackgranatowski commented May 31, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 31, 2026 •

edited

Loading